<template>
  <div id="abnormalities">
    <!--     头部-->
    <TmsHeader :tmsheader="tmsheader"></TmsHeader>

    <!--     搜素功能模块-->
    <div id="gongNeng">
      <div class="gongNeng_first">
        <el-select v-model="value" placeholder="订单编号" class="shouHuo">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-input class="input" v-model="input" placeholder="请输入内容" clearable></el-input>


        <!--       时间选择-->
        <span id="shenbaoTime">申报时间 :</span>
        <div class="block">
          <el-date-picker
              v-model="value1"
              type="date"
              placeholder="开始日期">
          </el-date-picker>
        </div>
        <div class="line">-</div>
        <div class="block">
          <el-date-picker
              v-model="value1"
              type="date"
              placeholder="结束日期">
          </el-date-picker>
        </div>
        <!--         搜素框-->
        <el-button type="primary" icon="el-icon-search" class="search" @click="searchData">搜索</el-button>
      </div>
      <!--       功能第二排-->
      <div class="gongNeng_second">
        <ul id="gongNengS">
          <li class="active">全部</li>
          <li>异常</li>
          <li>已处理</li>
        </ul>
      </div>
      <!--       功能第3排-->
      <div class="gongNeng_third">
        <el-button type="info" @click="chaKan">查看</el-button>
      </div>
    </div>
    <!--     table模块-->
    <div class="table">
      <el-table
          ref="multipleTable"
          :data="currPageData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="dingDan.id"
            label="订单编号"
            width="120">
        </el-table-column>
        <el-table-column
            prop="dingDan.xiaDanShiJian"
            label="下单日期"
            width="120">
        </el-table-column>
        <el-table-column
            prop="yunDan.id"
            label="运单编号"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="yiChang.yiCahngMiaoShu"
            label="异常原因"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="yiChang.createTime"
            label="申报时间"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="yiChang.isDeleted"
            label="状态"
            show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <!--    分页   -->
      <el-pagination
          class="fenYe"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="currPageData.length">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import TmsHeader from '../../TmsHeader'
export default {
  name: "Abnormalities2",
  components: {TmsHeader},
  data() {
    return {
      tmsheader:{
        tmsBigTitle: "运输端",
        tmsATitle: "异常管理",
        tmsBTitle: "异常统计",
      },
      options: [{
        value: '选项1',
        label: '订单编号'
      },
        {
          value: '选项2',
          label: '运单号'
        }
      ],
      options2:[
        {
          value2: '选项11',
          label: '申报时间'
        }
      ],
      // tableData: [{}],
      value: '',
      input:'',
      value1: '',
      value2: '',
      multipleSelection: [],
      currentPage1:1,
      currentPage4: 4,
      pageSize:3,
      currPageData:[],
    };
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val+"2222222333");
      let val1 = JSON.stringify(val);
      console.log(val1);
    },
    // 监听pagesize 改变的事件
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      console.log(val);
      this.pageSize = val;
      this.handleCurrentChange(1);
    },
    //监听页码改变的事件
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currPageData = this.currPageData.slice((val-1)*this.pageSize,val*this.pageSize);
    },
    shenQing(){
      this.$router.push('./deal')
    },
    chaKan(){
      // this.$router.push('./absDetail')
    },
  //  获取异常数据
    getData(){
      this.$axios({
        url:'/api/siji/yun-shu-zhi-xing/FenYeChaXun',
        headers:{'content-type':'application/json'},
        method:'post',
        data:{
          jiSiId:1,
          limit:5,
          page:1,
        }
      }).then((res)=>{
        console.log(res);
        console.log(res.data);
        let {data:res1} = res.data;
        console.log(res1);
        console.log(res1.list);
        this.currPageData = res1.list;
      }).catch(err=>{
        console.log(err);
      })
    },
  //  搜索功能实现
    searchData() {

    }
  },
  mounted() {
    this.currPageData = this.currPageData.slice(0,this.pageSize);
    this.getData()
  }
};
</script>
<style lang='less' scoped>
header{
  text-align: left;
  /*border:1px solid;*/
}
#gongNeng{
  margin-top:10px;
  /*border:1px solid;*/
  text-align: left;
}
.gongNeng_first{
  display: flex;
}
.gongNeng_second{
  margin:10px 0;
}
.shouHuo{
  margin-right:10px;
}
.xiaDan,.search{
  margin-left: 20px;
}

.input{
  height: 40px;
  width: 260px;
}
.line{
  font-size: 30px;
}
.block{
  width: 220px;
  height: 40px;
}
#gongNengS{
  list-style: none;
  display: flex;
  padding: 0;
}
#gongNengS>li{
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border:1px solid gray;

}
li:hover{
  background: #CCCCCA;
}
.active{
  background: #CCCCCA;
}
.table{
  margin-top:10px;
}
.fenYe{
  margin-top:20px;
}
#shenbaoTime{
  padding-left:50px;
  padding-top:10px;
}
</style>